<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>书籍管理</title>
  <!-- 引入 bootstrap.css -->
  <link rel="stylesheet" href="../css/axiosbooks.css" />
</head>

<body>
  <div class="container">
    <div class="row">

      <!-- 显示书籍 -->
      <div class="col-6">
        <hr />
        <!-- 1 输入框和按钮 -->
        <div class="input-group">
          <input id="searchBookName" type="text" class="form-control" placeholder="请输入要寻找的书名" />
          <span class="input-group-btn">
            <button id="searchBtn" class="btn btn-primary" type="button">
              搜索
            </button>
            <button class="addBtn btn btn-primary">添加</button>
          </span>
        </div>

        <hr />

        <!-- 2 列表 -->
        <table class="table table-bordered table-striped">
          <thead>
            <th>id</th>
            <th>书名</th>
            <th>作者</th>
            <th>出版社</th>
            <th>操作</th>
          </thead>
          <tbody>
          </tbody>
        </table>
      </div>

      <!-- 添加书籍 -->
      <div class="col-6 addDiv" style="display: none;">
        <hr />
        <form>
          <div class=" form-group">
            <label for="bookname">书名</label>
            <input type="text" class="form-control" id="bookname" placeholder="请输入书名" />
          </div>

          <div class="form-group">
            <label for="author">作者</label>
            <input type="text" class="form-control" id="author" placeholder="请输入作者" />
          </div>

          <div class="form-group">
            <label for="publisher">出版社</label>
            <input type="text" class="form-control" id="publisher" placeholder="请输入出版社" />
          </div>

          <button type="submit" id="confirmBtn" class="btn btn-success">添加书籍</button>
          <button type="submit" id="closeBtn" class="btn btn-success">取消</button>
        </form>
      </div>
      <script>
        // 接口文档：https://docs.apipost.cn/preview/f62dc0b91dc8d8ea/c31d9a50dccf65e3

        // 查询书籍：http://www.itcbc.com:3006/api/getbooks?appkey=1234567
        // 添加书籍：http://www.itcbc.com:3006/api/addbook
        // 删除书籍：http://www.itcbc.com:3006/api/delbook

        // 获取标签元素tbody
        const tbody = document.querySelector('tbody');
        // 获取添加数据按钮元素 btn
        const btn = document.querySelector('#confirmBtn');
        // 获取搜索按钮标签元素
        const searchBtn = document.querySelector('#searchBtn');
        // 获取搜索框标签元素
        const searchBookName = document.querySelector('#searchBookName');
        // 获取form标签元素
        const form = document.querySelector('form');
        // 获取添加区域模块标签
        const addDiv = document.querySelector('.addDiv');
        // 点击添加按钮标签
        const addBtn = document.querySelector('.addBtn');
        // 添加数据盒子取消按钮
        const closeBtn = document.querySelector('#closeBtn');

        // 获取新增数据div盒子输入框标签
        const booknameInfo = document.querySelector('#bookname')
        const authorInfo = document.querySelector('#author')
        const publisherInfo = document.querySelector('#publisher')
        // 声明id全局变量，用来在编辑数据时传递id值，因为编辑必须要传id
        let Id;


        // 获取所有书籍,渲染页面，封装函数
        function getBooks(bookNames) {
          // 声明params初始对象
          const params = { appkey: '777888999' };
          if (bookNames) {
            params.bookname = bookNames;
          }
          axios({
            url: 'http://www.itcbc.com:3006/api/getbooks',
            method: 'get',
            params,
          }).then(result => {
            // 解构对象，获取data数据
            const { data } = result.data;
            // 遍历数组,拼接标签
            const html = data.reduce((h, v) =>
              // 返回拼接的标签，保存到数组中
              h + `
                <tr>
                  <td>${v.id}</td>
                  <td>${v.bookname}</td>
                  <td>${v.author}</td>
                  <td>${v.publisher}</td>
                  <td>
                    <button data-id="${v.id}" class="deleteBtn">删除</button>
                    <button data-id="${v.id}" class="editBtn">编辑</button>
                  </td>
                </tr>
              `, '');
            tbody.innerHTML = html;
          })
        }
        getBooks();

        // 搜索功能 创建点击事件
        searchBtn.addEventListener('click', function (e) {
          const bookName = searchBookName.value.trim();
          getBooks(bookName);
        })

        // 删除功能 给tbody绑定事件委托点击事件
        tbody.addEventListener('click', function (e) {
          if (e.target.classList.contains('deleteBtn')) {
            // 获取自定义属性id
            const id = e.target.dataset.id;
            // 发送delete删除axios的请求
            axios({
              url: 'http://www.itcbc.com:3006/api/delbook',
              method: 'delete',
              params: {
                id: id,
                appkey: '777888999'
              }
            }).then(result => {
              alert('删除成功！')
              // 调用搜索点击事件，实现删除后刷新渲染页面功能
              searchBtn.click();
            })
          } else if (e.target.classList.contains('editBtn')) {
            addDiv.style.display = 'block';
            Id = e.target.dataset.id;
            // 获取数据
            axios({
              url: 'http://www.itcbc.com:3006/api/getbooks?appkey=777888999',
              method: 'get',
              params: {
                id: Id, //当需要用id进行查找时，需要跟url请求地址相结合查询，加一个?appkey=777888999键值精确匹配
              }
            }).then(r => {
              // 解构数组，因为通过id查找获取到的是一个数组
              const [data] = r.data.data;
              booknameInfo.value = data.bookname;
              authorInfo.value = data.author;
              publisherInfo.value = data.publisher;
            })
            btn.innerHTML = '确认编辑';
            closeBtn.innerHTML = '取消编辑';
          }
        })

        // 点击添加按钮点击事件
        addBtn.addEventListener('click', function (e) {
          addDiv.style.display = 'block';
          btn.innerHTML = '确认添加';
          closeBtn.innerHTML = '取消添加';
          // 清空表单数据
          form.reset();
        })
        // 点击取消按钮点击事件
        closeBtn.addEventListener('click', function (e) {
          // 隐藏添加数据框
          addDiv.style.display = 'none';
          // 清空表单数据
          form.reset();
        })

        // 新增书籍功能
        // 给添加按钮绑定点击事件
        btn.addEventListener('click', function (e) {
          // 阻止表单默认提交行为
          e.preventDefault();
          // 判断添加数据盒子中的按钮文字是否为‘添加书籍’字段，是的话才能做添加操作
          if (btn.innerText == '确认添加') {
            // 新增书籍axios的post请求函数
            axios({
              url: 'http://www.itcbc.com:3006/api/addbook',
              method: 'post',
              data: {
                bookname: booknameInfo.value.trim(),
                author: authorInfo.value.trim(),
                publisher: publisherInfo.value.trim(),
                appkey: '777888999'
              }
            }).then(result => {
              alert('添加成功！')
              searchBtn.click();
              // 清空表单
              form.reset();
              // 隐藏添加盒子
              addDiv.style.display = 'none';
            }).catch(error => {
              // 用户弹窗提示
              alert('添加的数据不能为空！')
              // 抛出信息不能为空提示
              throw new Error('添加的数据为空了，所以会有报错提示！')
            });
            // 判断添加数据盒子中的按钮文字是否为‘编辑书籍’字段，是的话才能做编辑操作
          } else if (btn.innerText == '确认编辑') {
            // 编辑书籍请求
            axios({
              url: 'http://www.itcbc.com:3006/api/updatebook',
              method: 'put',
              data: {
                id: Id, //获取全局变量Id值，当点击对应的编辑按钮时会获取对应的自定义属性id 是与书籍的id值相匹配的
                bookname: booknameInfo.value.trim(),
                author: authorInfo.value.trim(),
                publisher: publisherInfo.value.trim(),
                appkey: '777888999'
              }
            }).then(result => {
              alert('修改书籍成功！')
              searchBtn.click();
              // 清空表单
              form.reset();
              // 隐藏添加盒子
              addDiv.style.display = 'none';
            })
          }
        })
      </script>
  <script src="../js/axios.js"></script>
</body>

</html>